<template>
  <view class="addAddress absolute">
    <view class="list">
      <div class="box">
        <view class="item acea-row row-between-wrapper">
          <view class="name">收货人</view>
          <input type="text" placeholder="请输入收货人姓名" v-model="userAddress.realName" required />
        </view>
        <view class="item acea-row row-between-wrapper">
          <view class="name">手机号</view>
          <input type="text" placeholder="请输入手机号" v-model="userAddress.phone" required />
        </view>
      </div>

      <div class="box">
        <view class="item acea-row row-between-wrapper">
          <view class="name">所在地区</view>
          <view class="picker acea-row row-between-wrapper select-value form-control">
            <view class="address">
              <CitySelect ref="cityselect" :defaultValue="defaultAddress" @callback="result" :items="district"></CitySelect>
            </view>
            <view class="iconfont icon-dizhi font-color-red"></view>
          </view>
        </view>
        <view class="item acea-row row-between-wrapper" style="padding: 24rpx 16rpx;">
          <view class="name">详细地址</view>
          <textarea class="form-text" type="text" placeholder="包括小区、楼栋号、\n门牌号等参考格式:xx小区xx栋xx号" v-model="userAddress.detail" required  style="height: 156rpx;" />
        </view>
      </div>
    </view>


    <view class="default acea-row row-middle" style="margin: 0 16rpx;">
      <view class="select-btn">
        <view class="checkbox-wrapper">
<!--          <checkbox-group @change="ChangeIsDefault">-->
<!--            <label class="well-check">-->
<!--              <checkbox :value="userAddress.isDefault == 1 ? 'checked' : ''" :checked="userAddress.isDefault ? true : false"></checkbox>-->
<!--              <text class="def">设置为默认地址</text>-->
<!--            </label>-->
<!--          </checkbox-group>-->
          <div class="txt">设置为默认地址</div>
          <u-switch v-model="userAddress.isDefault" :size="30" active-color="#F25A27"></u-switch>
        </view>
      </view>
    </view>
    <view></view>
    <div class="btn-content">
      <view class="keepBnt bg-color-red" @tap="submit">立即保存</view>
    </div>
<!--    <view class="wechatAddress" v-if="isWechat && !id" @click="getAddress">导入微信地址</view>-->
  </view>
</template>

<script type="text/babel">
import CitySelect from '@/components/CitySelect';
import { getAddress, postAddress, getCity } from '@/api/user';
import attrs, { required, chs_phone } from '@/utils/validate';
import { validatorDefaultCatch } from '@/utils/dialog';
import { openAddress } from '@/libs/wechat';
import { _router, isWeixin } from "@/utils/oldIndex";
import schema from 'async-validator'

export default {
  name: 'AddAddress',
  components: {
    CitySelect,
  },
  data() {
    return {
      district: [],
      id: 0,
      userAddress: { isDefault: 0 },
      address: {},
      isWechat: isWeixin(),
      defaultAddress: {},
      addressText: '',
    };
  },
  onLoad(options) {
    let id = options.id;
    this.id = id;
    this.getUserAddress();
    this.getCityList();
  },
  watch: {
    addressText(nextModel2) {
      console.log(nextModel2, 8585858585);
    },
  },
  methods: {
    getCityList: function () {
      let that = this;
      getCity()
        .then((res) => {
          that.district = res.data;
          that.ready = true;
        })
        .catch((err) => {
          uni.showToast({
            title: err.msg,
            icon: 'none',
            duration: 2000,
          });
        });
    },
    getUserAddress: function () {
      if (!this.id) return false;
      let that = this;
      getAddress(that.id).then((res) => {
        that.userAddress = res.data;
        that.defaultAddress = {
          province: {
            n: res.data.province,
          },
          city: {
            n: res.data.city,
          },
          district: {
            n: res.data.district,
          },
        };
        that.addressText = res.data.province + ' ' + res.data.city + ' ' + res.data.district;
        that.address.province = res.data.province;
        that.address.city = res.data.city;
        that.address.district = res.data.district;
      });
    },
    getAddress() {
      console.log('aaaaaaaaaa');
      openAddress().then((userInfo) => {
        uni.showLoading({ title: '加载中' });
        postAddress({
          real_name: userInfo.userName,
          phone: userInfo.telNumber,
          address: {
            province: userInfo.provinceName,
            city: userInfo.cityName,
            district: userInfo.countryName,
          },
          detail: userInfo.detailInfo,
          post_code: userInfo.postalCode,
          wx_export: 1,
        })
          .then(() => {
            this.page = 1;
            this.loading = false;
            this.loadend = false;
            this.addressList = [];
            this.AddressList();
            uni.hideLoading();
            uni.showToast({
              title: '添加成功',
              icon: 'success',
              duration: 2000,
            });
          })
          .catch((err) => {
            uni.hideLoading();
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: 'none',
              duration: 2000,
            });
          });
      });
    },
    async submit() {
      let name = this.userAddress.realName,
        phone = this.userAddress.phone,
        addressText = this.addressText,
        detail = this.userAddress.detail,
        isDefault = this.userAddress.isDefault;
      try {
        await new schema({
          name: [required(required.message('姓名')), attrs.range([2, 16], attrs.range.message('姓名'))],
          phone: [required(required.message('联系电话')), chs_phone(chs_phone.message())],
          addressText: [required('请选择地址')],
          detail: [required(required.message('具体地址'))],
        }).validate({ name, phone, addressText, detail });
      } catch (e) {
        console.log('错误信息', e)
        return validatorDefaultCatch(e);
      }
      try {
        let that = this,
          data = {
            id: that.id,
            real_name: name,
            phone: phone,
            address: this.address,
            detail: detail,
            is_default: isDefault ? true : false,
            post_code: '',
          };
        postAddress(data).then(function () {
          if (that.id) {
            uni.showToast({
              title: '修改成功',
              icon: 'none',
              duration: 2000,
            });
          } else {
            uni.showToast({
              title: '操作成功',
              icon: 'none',
              duration: 2000,
            });
            // uni.showToast({
            //   title: "已取消绑定",
            //   icon: "none",
            //   duration: 2000
            // });
            // that.$yrouter.replace({
            //   path: "/pages/user/PersonalData/index"
            // });
          }
          _router.back();
        });
      } catch (err) {
        uni.showToast({
          title: err.msg || err.response.data.msg || err.response.data.message,
          icon: 'none',
          duration: 2000,
        });
      }
    },
    ChangeIsDefault: function () {
      this.userAddress.isDefault = !this.userAddress.isDefault;
    },
    result(values) {
      console.log(this);
      console.log(values);
      this.address = {
        province: values.province.name || '',
        city: values.city.name || '',
        district: values.district.name || '',
        city_id: values.city.id,
      };
      this.addressText = `${this.address.province}${this.address.city}${this.address.district}`;
      // this.addressText =
      //   this.address.province + this.address.city + this.address.district;
    },
  },
};
</script>

<style lang="less">
//@import '../../../style/style';

page {
  background: #f3f7f8;
}
.address {
  text {
    width: 100%;
    display: block;
  }
}

.box {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0,0,0,0.08);
  border-radius: 8rpx;
  margin: 16rpx 16rpx;
  .item {
    display: flex;
    flex-wrap: nowrap;
    .name {
      font-weight: 400 !important;
      font-size: 32rpx !important;
      color: #222222!important;
      line-height: 42rpx!important;
    }
  }
}

.select-btn {
  width: 100%;
  .checkbox-wrapper {
    width: 100%;
  }
}
.checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-text {
  width: 494rpx !important;
  height: 156rpx !important;
  background: #F3F7F8 !important;
  border-radius: 8rpx 8rpx 8rpx 8rpx!important;
  padding: 16rpx;
  //margin-right: 16rpx;
}

.btn-content {
  position: fixed ;
  width: 100vw;
  bottom: 0rpx;
  height: 168rpx;
  background: #FFFFFF;
  box-shadow: 0rpx -2rpx 4rpx 2rpx rgba(9,9,9,0.08);
  .keepBnt {
    width: 686rpx !important;
    height: 72rpx!important;
    background: linear-gradient( 90deg, #F32F1A 0%, #F68A2D 100%)!important;;
    font-weight: 400!important;
    font-size: 28rpx!important;
    color: #FFFFFF!important;
    line-height: 72rpx!important;
    text-align: center!important;
    border-radius: 0rpx !important;
  }
}
</style>
